<template>
  <view
    class="tab-list"
    :style="{ backgroundColor: propsData.params.leftTabBg }"
  >
    <view class="tabs-section">
      <view
        class="tab-item"
        v-for="(item, index) in classifyList"
        :key="index"
        :class="[
          activeTab == index ? 'activeTab' : '',
          activeTab == index - 1 ? 'activeTabTop' : '',
          activeTab == index + 1 ? 'activeTabDown' : '',
        ]"
        @click="handleTab(item, index)"
        :style="{ backgroundColor: propsData.params.leftTabBg }"
      >
        <view class="tab-name" :style="[fontCss(index)]">{{ item.title }}</view>
        <view
          v-if="activeTab == index"
          :style="{ background: propsData.params.activeLineColor }"
          class="active-line"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    classifyList: {
      type: Array,
      default: [],
    },
    activeTab: {
      type: Number,
      default: 0,
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  computed: {
    tabTitleCss() {
      let style = this.propsData.params.defaultTab.fontCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
  },
  methods: {
    handleTab(item, index) {
      this.$emit("changeTab", { item, index });
    },
    fontCss(index) {
      let style = Object.assign({}, this.propsData.params.defaultTab.fontCss);
      style.fontSize = style.fontNum * 2 + "rpx";
      if (index == this.activeTab) {
        style.color = this.propsData.params.defaultTab.activeColor;
      } else {
        style.color = this.propsData.params.subtitleTab.defaultTitleColor;
      }
      return style;
    },
  },
};
</script>

<style scoped lang="scss">
.tab-list {
  width: 21.33vw;
  height: 100%;
  max-height: 90vh;
  background-color: #ffffff;
  .tabs-section {
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    .tab-item {
      width: 100%;
      height: 12vw;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 3;
      background-color: #ffffff;
      .tab-content {
        width: 70%;
        word-break: break-all;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6b6b6b;
        position: relative;
      }
      .active-line {
        width: 6rpx;
        height: 5.34vw;
        background: #fa2c1b;
        position: absolute;
        left: 0;
        top: 3.33vw;
        z-index: 1;
      }
    }
    .activeTab {
      background-color: #f2f2f2 !important;
      .tab-content {
        .tab-name {
          font-weight: 600;
          color: #000000;
        }
      }
    }
    .activeTabTop {
      border-radius: 0 2.13vw 0 0;
      overflow: hidden;
    }
    .activeTabDown {
      border-radius: 0 0 2.13vw 0;
      overflow: hidden;
    }
  }
}
</style>
